<template>
  <div class="container" @dblclick="revertMap">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>

<script>
import axios from "axios"
import {getProvinceMapInfo} from "@/utils/map_utils";
import {mapState} from 'vuex'

export default {
  name: "Map",
  data() {
    return {
      chartInstance: null,
      allData: null,
    }
  },
  created() {
    this.$socket.registerCallBack('mapData', this.getDate)
  },
  destroyed() {
    this.$socket.unRegisterCallBack('mapData', this.getDate)
  },
  mounted() {
    this.initChart()
    // this.getDate()
    this.$socket.send({
      action: 'getData',
      socketType: 'mapData',
      chartName: 'map',
      value: ''
    })
    window.addEventListener('resize', this.screenAdapter)
  },
  computed: {
    ...mapState(['themes'])
  },
  watch:{
    themes (){
      this.chartInstance.dispose()
      this.initChart()
      this.screenAdapter()
      this.updateChart()
    }
  },
  methods: {
    async initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.map_ref, this.themes)
      // 获取中国的矢量地图数据
      await axios.get('http://localhost:8080/static/map/china.json').then(res => {
        this.$echarts.registerMap('china', res.data)
        const initOptions = {
          geo: {
            emphasis: {
              label: {
                show: true,
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#3d81bb',
                borderColor: '#fff'
              }
            },
            geo: 'map',
            map: 'china',
            top: '5%',
            bottom: '5%',
            // 地图的缩放配置
            roam: true,
            scaleLimit: {
              min: 1,
              max: 1.5
            },
            // 标签样式设置
            label: {
              show: false,
              fontSize: 14,
              color: '#2b2b2b',
            },
            itemStyle: {
              borderColor: '#333',
              // areaColor: 'rgba(78, 78, 78, 1)'
            }
          },
          legend: {
            left: '5%',
            bottom: '10%',
            orient: 'vertical',
          }
        }
        this.chartInstance.setOption(initOptions)
      })
      this.chartInstance.on('click', async (arg) => {
        let pathData = getProvinceMapInfo(arg.name)
        if (pathData.key === undefined) {
          return ''
        } else {
          await axios.get(`http://localhost:8080${pathData.path}`).then(res => {
            this.$echarts.registerMap(pathData.key, res.data)
            const changeOptions = {
              geo: {
                map: pathData.key
              }
            }
            this.chartInstance.setOption(changeOptions)
          })
        }
      })
    },
    getDate(resData) {
      console.log(resData)
      this.allData = resData
      this.updateChart()
    },
    updateChart() {
      let legendArr = this.allData.map(item => {
        return item.name
      })
      let seriesArr = this.allData.map(item => {
        return {
          type: 'effectScatter',
          name: item.name,
          data: item.children,
          coordinateSystem: 'geo',
          rippleEffect: {
            scale: 5,
            brushType: 'stroke',
          }
        }
      })
      const dataOptions = {
        color: ['#845ec2', '#0081cf', '#008f7a'],
        title: {
          text: '▌   商家分布',
          left: 20,
          top: 20
        },
        series: seriesArr,
        legend: {
          data: legendArr,
        }
      }
      this.chartInstance.setOption(dataOptions)
    },
    screenAdapter() {
      this.chartInstance.resize()
    },
    revertMap() {
      this.chartInstance.setOption({
        geo: {
          map: 'china'
        }
      })
    }
  },

}
</script>

<style scoped>

</style>